<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./vue.global.js"></script>
    <style>
      #plong {
        height: 2000px;
      }
    </style>
  </head>

  <body>
    <div id="app">
      <div id="dynamic-arguments-example" class="demo">
        <p id="plong">Scroll down the page</p>
        <!-- 200作为自定义指令的值 可以通过binding.value获得 -->
        <p v-pin="200">Stick me 200px from the top of the page</p>

        <div v-demo="{ color: 'white', text: 'hello!' }"></div>
      </div>
    </div>
    <script>
      const app = Vue.createApp({});

      /* 定义全局自定义指令v-pin */
      app.directive(
        "pin",
        // {
        //     /* 带有v-pin指令的组件挂载时 执行如下逻辑 */
        //     /* el   带有v-pin指令的元素 */
        //     /* 通过binding.value可以获取自定义指令携带的值 */
        //     mounted(el, binding) {

        //         // 将v-pin作用的元素设置为固定定位
        //         el.style.position = 'fixed'

        //         // binding.value 是我们传递给指令的值——在这里是 200
        //         el.style.top = binding.value + 'px'
        //     }
        // }

        /* 不写生命周期时 默认作用在mounted与updated */
        (el, binding) => {
          el.style.position = "fixed";
          el.style.top = binding.value + "px";
        }
      );

      /*  */
      app.directive("demo", (el, binding) => {
        console.log(binding.value.color); // => "white"
        console.log(binding.value.text); // => "hello!"
      });

      const vm = app.mount("#app");
    </script>
  </body>
</html>
